<template>
  <div class="index-form form-contain">
    <div class="index-right">
         <div class="index-hdbanner">什么是移动互动广告？</div>
      <div class="index-hddetalis">
     在特定媒介或载体上针对产品需要传达的信息主题，借助创新的互动形式进行的广告推广。
      </div>
      <div class="hdadvertising">
        您的广告可以展示在这里
      </div>
      <div class="hdfriends">
          <span  :style ="note"><img src="static/images/hd1.png"></span>
          <span  :style ="note"><img src="static/images/hd2.png"></span><br/>
           <span  :style ="note"><img src="static/images/hd3.png"></span>
          <span  :style ="note"><img src="static/images/hd4.png"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [],
      imgList: [],
       note: {
            backgroundImage: "url(static/images/mobile-border3.png)",
            backgroundRepeat: "no-repeat",
          },
    }
  },
  created () {
  },
  methods: {}
}
</script>

<style lang="less">
.index-form{
  .el-upload-list__item,
  .el-upload--picture-card{
    height: 100px;
    width: 200px;
  }
  .el-upload--picture-card{
    line-height: 100px;
  }
  .index-left{
    float: left;
    width: 10%;
    p{
      color: #101010;
      text-align: right;
      line-height: 200px;
      span{
        color: rgb(229, 28, 35);
      }
    }
  }
   .index-hdbanner{
    width:9.5625rem;
height:.8125rem;
font-size:.875rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
letter-spacing:.0235rem;
text-align: center;
  }
  .index-hddetalis{
   width:20.9375rem;
height:2.0625rem;
font-size:.75rem;;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
  }
  .hdadvertising{
    width:9.875rem;
height:.6875rem;
font-size:.625rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
text-align: center;
  }
   .hdfriends{
    width: 100%;
    height: auto;
    margin: 0 auto;
margin-top: .9375rem;
 span:nth-child(1), span:nth-child(4){
             background-size: 4.5625rem 8.3125rem;
               width: 4.5625rem;
               height:8.3125rem;
               display:inline-block;
margin-left:6.7rem;
margin-top: .9375rem;
     img{
      display: block;
      width: 3.875rem;
      height:6.5625rem;
      padding-top: .5625rem;
    }
   
   }
    span{
             background-size: 4.5625rem 8.3125rem;
               width: 4.5625rem;
               height:8.3125rem;
               display:inline-block;
margin-left:2.375rem;
margin-top: .9375rem;
     img{
      display: block;
     width: 3.875rem;
      height:6.5625rem;
      padding-top:.8125rem;
      padding-left: .375rem;
    }
     }
   }
  }

</style>
